<template>
  <div class="container" v-if="zone">
    <swiper class="swiper" v-if="movies && movies.length > 0" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
      <block v-for="(item, index) in movies" :index="index" :key="index">
        <swiper-item>
          <image :src="item.image" class="slide-image" mode="scaleToFill" @click="handleRouter(item)" />
        </swiper-item>
      </block>
    </swiper>
    <van-tabs :active="active" @change="onChange" color="#E6648C" v-if="zone.categories&&zone.categories.length">
      <block v-for="(item, index) in zone.categories" :key="index">
        <van-tab :title="item.name"></van-tab>
      </block>
    </van-tabs>
    <div class="product-list" v-if="list">
      <div class="item" v-for="(item, index) in list" :key="index" @click="toProductInfo(item.id)">
        <img class="pic-left" :src="item.image + '?imageView2/1/w/320/h/320/q/75'">
        <div class="right-info">
          <div class="title">{{item.title}}</div>
          <div class="comment">{{item.desc || ''}}</div>
          <div class="price">
            ￥{{item.price}}
          </div>
        </div>
      </div>
    </div>
    <page-footer />
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import * as OperationAction from '@/api/operation'
import Toast from 'vant-weapp/dist/toast/toast'
import PageFooter from '@/components/page-footer.vue'
import { mapState } from 'vuex'
export default {
  components: {
    PageFooter
  },
  data () {
    return {
      movies: [],
      zone: null,
      active: 0,
      currentTitle: null,
      list: null
    }
  },
  computed: {
    ...mapState(['me'])
  },
  onLoad (e) {
    this.currentTitle = null
    this.list = []
    wx.showNavigationBarLoading()
    wx.showShareMenu({ withShareTicket: true })
    if (this.$root.$mp.query.title) this.currentTitle = this.$root.$mp.query.title
    if (this.$root.$mp.query.active) {
      this.active = this.$root.$mp.query.active
    } else { this.active = 0 }
    if (this.$root.$mp.query.id) this.fetchZone()
    if (this.$root.$mp.query.code) wx.setStorageSync('__inviteCode', this.$root.$mp.query.code)
  },
  onPullDownRefresh () {
    wx.showNavigationBarLoading()
    this.fetchZone()
    wx.stopPullDownRefresh()
  },
  onShareAppMessage (res) {
    return {
      title: this.shareTitle(),
      path: this.sharePath()
    }
  },
  methods: {
    onChange (event) {
      if (!this.zone) return
      this.active = event.mp.detail.index
      this.currentTitle = event.mp.detail.title
      if (this.zone.categories[this.active].products && this.zone.categories[this.active].products.length) {
        this.list = this.zone.categories[this.active].products
      }
    },
    handleRouter (item) {
      switch (item.open_type) {
        case 'goods-zone':
          wx.navigateTo({
            url: '../product/zone?id=' + item.target
          })
          break
        case 'placardList':
          wx.navigateTo({
            url: '../placard/list'
          })
          break
        case 'placardDetail':
          wx.navigateTo({
            url: '../placard/detail?id=' + item.target
          })
          break
        case 'goods':
          wx.navigateTo({
            url: '../product/detail?id=' + item.target
          })
          break
        case 'goods-search':
          wx.navigateTo({
            url: '../product/search?title=' + item.target
          })
          break
        case 'brand':
          wx.navigateTo({
            url: '../brand/index?id=' + item.target
          })
          break
        case 'category':
          wx.navigateTo({
            url: '../brand/category'
          })
          break
      }
    },
    shareTitle () {
      if (!this.zone) return ''
      if (!this.me) return `美控向您推荐了${this.zone.display_name}`
      if (this.me) return `${this.me.nickname}向您推荐了${this.zone.display_name}`
    },
    sharePath () {
      if (!this.zone) return ''
      if (!this.me) return '/pages/product/zone?id=' + this.zone.id + '&title=' + this.currentTitle
      if (this.me && this.me.invite_code) {
        return '/pages/product/zone?code=' + this.me.invite_code + '&id=' + this.zone.id + '&title=' + this.currentTitle + '&active=' + this.active
      }
    },
    toProductInfo (id) {
      if (id) wx.navigateTo({ url: 'detail?id=' + id })
    },
    fetchBanners () {
      let params = {
        p: 'mp',
        key: 'zone::' + this.zone.name
      }
      OperationAction.getBannerList(params).then(data => {
        this.movies = data
        wx.hideNavigationBarLoading()
      }).catch((err) => Toast(err.msg))
    },
    fetchZone () {
      OperationAction.getZones(this.$root.$mp.query.id).then(data => {
        this.zone = data
        if (this.zone.categories[0].products && this.zone.categories[0].products.length) {
          this.list = this.zone.categories[0].products
        }
        wx.setNavigationBarTitle({ title: data.display_name })
        this.fetchBanners()
      }).catch(() => {
        setTimeout(() => { wx.navigateBack({ delta: 1 }) }, 2000)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@theme-red: #E6648C;
.container {
  background-color: #f7f7f7;
  min-height:667px;
  position:relative;
  .swiper {
    image {
      width: 100%;
      height: 312rpx;
    }
    height: 312rpx;
  }
  .product-list{
    width: 100%;
    background: #fff;
    .item {
      display:flex;
      flex-flow:row wrap;
      justify-content:space-between;
      padding:15rpx;
      border-bottom:1rpx solid #F0F0F0;
      .pic-left {
        width:240rpx;
        height:240rpx;
        border-radius: 4rpx;
      }
      .right-info {
        flex: 1;
        padding-left:25rpx;
        .title{
          width:100%;
          text-align:left;
          color:#2F2F2F;
          font-size:25rpx;
          font-weight:500;
          height:50rpx;
        }
        .comment {
          width:100%;
          color:#acacac;
          font-size:24rpx;
          height:98rpx;
          margin:10rpx 0;
          overflow:hidden;
        }
        .price {
          width:100%;
          color:@theme-red;
          display:flex;
          font-weight:500;
          font-size: 32rpx;
        }
      }
    }
  }
  button {
    color: white;
    background: @theme-red
  }
  button::after {
    border: none;
  }
}
</style>

